
<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import { Course } from "../../types";
import { addCourse, deleteCourse, getCourseList, updateCourse } from "../../apis/CourseApi.ts";
import { ElMessage } from "element-plus";
import { Department } from "../../types";

const dataList = ref<Array<Course>>([]);
const showForm = ref(false);
const dialogForm = ref<Course>({});
const courseRange = ref([1,2])
const isUpdate = ref(false);

const getTableData = async () => {
  let res = await getCourseList();
  if (res.flag) {
    dataList.value = res.data;
  } else {
    ElMessage.error(res.msg);
  }
};

const openForm = (type: string, obj?: Course) => {
  showForm.value = true;
  if (type === 'add') {
    isUpdate.value = false;
    dialogForm.value = {xq:1};
  }
  if (type === 'update') {
    isUpdate.value = true;
    dialogForm.value = JSON.parse(JSON.stringify(obj));
    if (dialogForm.value.start && dialogForm.value.end){
      courseRange.value = [dialogForm.value.start,dialogForm.value.end]
    }else{
      courseRange.value = [1,2]
    }
  }
};

const deleteRow = async (row: Course) => {
  let res = await deleteCourse(row.id);
  if (res.flag) {
    ElMessage.success(res.msg);
    await getTableData();
  } else {
    ElMessage.error(res.msg);
  }
};

const submitDialog = async () => {
  if (!dialogForm.value.name) {
    ElMessage.error('课程名称不能为空');
    return;
  }
  if(!dialogForm.value.maxNum || dialogForm.value.maxNum < 0 ){
    ElMessage.error('选修人数不能小于0');
    return;
  }
  //校验是否选择周数
  if(!dialogForm.value.start || !dialogForm.value.end || dialogForm.value.start > dialogForm.value.end){
    ElMessage.error('课程起止节数错误');
    return;
  }
  if (!dialogForm.value.xq) {
    ElMessage.error('请选择课程周数');
    return;
  }
  console.log('dialogForm',dialogForm.value)
  if (isUpdate.value) {
    let res = await updateCourse(dialogForm.value);
    if (res.flag) {
      ElMessage.success(res.msg);
      showForm.value = false;
      await getTableData();
    } else {
      ElMessage.error(res.msg);
    }
  } else {
    let res = await addCourse(dialogForm.value);
    if (res.flag) {
      await getTableData();
      showForm.value = false;
    } else {
      ElMessage.error(res.msg);
    }
  }
};

const xqSelect = ref([
  {value: 1, label: '周一'},
  {value: 2, label: '周二'},
  {value: 3, label: '周三'},
  {value: 4, label: '周四'},
  {value: 5, label: '周五'},
  {value: 6, label: '周六'},
  {value: 7, label: '周日'}
])
//监视范围变化
watch(courseRange, (newVal) => {
  dialogForm.value.start = newVal[0];
  dialogForm.value.end = newVal[1];
})
onMounted(async () => {
  await getTableData();
});
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="16">
      <el-button type="primary" @click="openForm('add')">添加课程</el-button>
      <el-button type="primary" @click="getTableData()">刷新</el-button>
    </el-col>
    <el-col :span="8">
    </el-col>
  </el-row>
  <br>

  <div class="table-container">
    <el-table :data="dataList" stripe class="course-table" border table-layout="auto">
      <el-table-column prop="id" label="ID" width="100" />
      <el-table-column prop="name" label="课程名称" width="150" />
      <el-table-column prop="teacher" label="教师" width="120" />
      <el-table-column prop="creditHours" label="学分小时数" width="100" />
      <el-table-column label="课程时间" width="100" >
        <template #default="scope">
          周{{scope.row.xq}}
        </template>
      </el-table-column>
      <el-table-column label="课程起止节数" width="120" >
        <template #default="scope">
           {{scope.row.start}}-{{ scope.row.end}}
        </template>
      </el-table-column>
      <el-table-column prop="maxNum" label="最大选修人数" width="120" />
      <el-table-column prop="description" label="课程简介" width="200" />
      <el-table-column label="操作" width="160" fixed="right">
        <template #default="scope">
          <el-button type="primary" @click="openForm('update', scope.row)">编辑</el-button>
          <el-popconfirm title="确认删除？" @confirm="deleteRow(scope.row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="showForm" v-if="showForm" title="课程信息管理" width="500">
    <el-form :model="dialogForm">
      <el-form-item label="ID">
        <p>{{ dialogForm.id }}</p>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-input v-model="dialogForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="教师">
        <el-input v-model="dialogForm.teacher" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程简介">
        <el-input type="textarea" :rows="3" v-model="dialogForm.description" autocomplete="off" />
      </el-form-item>
      <el-form-item label="课程时间">
        <el-select v-model="dialogForm.xq">
          <el-option
              v-for="item in xqSelect"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程起止节数">
        <el-slider range  v-model="courseRange" :step="1" show-stops :max="12" :min="1" />
      </el-form-item>
      <el-form-item label="学分小时数">
        <el-input type="number" v-model.number="dialogForm.creditHours" autocomplete="off" />
      </el-form-item>
      <el-form-item label="最大选修人数">
        <el-input type="number" v-model.number="dialogForm.maxNum" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="showForm = false">取 消</el-button>
                <el-button type="primary" @click="submitDialog">确 定</el-button>
            </span>
    </template>
  </el-dialog>

</template>

<style scoped>
.course-table {
  width: 100%;
  overflow: auto;
}
.table-container {
  width: max-content;
  display: inline-block;
  overflow-x: auto;
  margin: 0 auto;
}
</style>